<!--项目立项-->
<template>
  <div>
    <div class="top-title">项目立项</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="申请人：" prop="responsiblePerson">
            <el-input v-model="ruleForm.responsiblePerson"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请日期：" prop="date">
            <el-input v-model="ruleForm.date"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请部门：" prop="depart">
            <el-input v-model="ruleForm.depart"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="№：" prop="number">
            <el-input v-model="ruleForm.number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="申请单位：" prop="unit">
            <el-input v-model="ruleForm.unit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tab">
        <el-tab-pane label="基本信息" name="1">
          <div class="tab-part">
            <span class="part-line"></span>
            <span class="part-title">基本信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称：" prop="entryName">
                <el-input v-model="ruleForm.entryName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目编号：" prop="entryId">
                <el-input v-model="ruleForm.entryId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目类型：" prop="entryType">
                <el-input v-model="ruleForm.entryType"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="负责人：" prop="responsiblePerson">
                <el-input v-model="ruleForm.responsiblePerson"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目部门：" prop="depart">
                <el-input v-model="ruleForm.depart"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="资金来源：" prop="fundingSource">
                <el-input v-model="ruleForm.fundingSource"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="投资估算：" prop="estimate">
                <el-input v-model="ruleForm.estimate"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="计划开始：" prop="planStartTime">
                <el-date-picker
                  v-model="ruleForm.planStartTime"
                  type="date"
                  placeholder="选择开始日期"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计划完成：" prop="planEndTime">
                <el-date-picker
                  v-model="ruleForm.planEndTime"
                  type="date"
                  placeholder="选择完成日期"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计划工期：" prop="duration">
                <el-input v-model="ruleForm.duration"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计收入：" prop="income">
                <el-input v-model="ruleForm.income"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="事由及说明：" prop="explanation">
                <el-input v-model="ruleForm.explanation"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目目标：" prop="projectTarget">
                <el-input v-model="ruleForm.projectTarget"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预期成果：" prop="expectedResults">
                <el-input v-model="ruleForm.expectedResults"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="可研报告：" prop="report">
                <el-input v-model="ruleForm.report"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="相关附件：" prop="annex">
                <el-input v-model="ruleForm.annex"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="tab-part">
            <span class="part-line"></span>
            <span class="part-title">审批意见</span>
          </div>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审批意见"
            v-model="ruleForm.approval">
          </el-input>
        </el-tab-pane>
        <el-tab-pane label="团队成员" name="2">
          <div class="tab-part">
            <span class="part-line"></span>
            <span class="part-title">团队成员</span>
          </div>
          <div class="operate-button" v-if="ModalType=='add'">
            <el-button @click="add" icon="el-icon-plus">新建</el-button>
            <el-button @click="" icon="el-icon-document-copy">复制</el-button>
            <el-button icon="el-icon-delete" @click="del">删除</el-button>
          </div>
          <el-table :data="tableData" border @selection-change="handleSelectionChange" style="width: 100%;margin-bottom: 10px">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="responsiblePerson" label="姓名">
              <template slot-scope="scope">
                <el-input v-model="scope.row.responsiblePerson"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="depart" label="部门">
              <template slot-scope="scope">
                <el-input v-model="scope.row.depart"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="role" label="项目角色">
              <template slot-scope="scope">
                <el-input v-model="scope.row.role"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="telephone" label="联系电话">
              <template slot-scope="scope">
                <el-input v-model="scope.row.telephone"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="illustrate" label="责任说明">
              <template slot-scope="scope">
                <el-input v-model="scope.row.illustrate"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="tab-part">
            <span class="part-line"></span>
            <span class="part-title">审批意见</span>
          </div>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审批意见"
            v-model="ruleForm.approval">
          </el-input>
        </el-tab-pane>
        <el-tab-pane label="收款合同" name="3">
          <div class="tab-part">
            <span class="part-line"></span>
            <span class="part-title">合同信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同名称：" prop="contractName">
                <el-input v-model="ruleForm.contractName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同编号：" prop="contractNumber">
                <el-input v-model="ruleForm.contractNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同金额：" prop="contractFee">
                <el-input v-model="ruleForm.contractFee"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="tab-part">
            <span class="part-line"></span>
            <span class="part-title">客户信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户名称：" prop="customerName">
                <el-input v-model="ruleForm.customerName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户编码：" prop="customerCode">
                <el-input v-model="ruleForm.customerCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="法人代表：" prop="representative">
                <el-input v-model="ruleForm.representative"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="tab-part">
            <span class="part-line"></span>
            <span class="part-title">审批意见</span>
          </div>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审批意见"
            v-model="ruleForm.approval">
          </el-input>
        </el-tab-pane>
      </el-tabs>
      <div v-if="ModalType=='add'" style="display: flex;justify-content: flex-end;margin-top: 16px">
        <el-button @click="send('ruleForm')">发送</el-button>
        <el-button type="primary" @click="save('ruleForm')" >保存待发</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'projectInitiation',
  data() {
    return {
      ruleForm: {
        responsiblePerson: '',
        date: '',
        depart: '',
        number: '',
        unit: '',
        fundingSource:'',
        explanation:'',
        projectTarget:'',
        expectedResults:'',
        customerName:'',
        customerCode:'',
        representative:'',

      },
      rules: {
        responsiblePerson: [
          { required: true, message: '请输入合同名称', trigger: 'blur' },
          { max: 20, message: '长度最大20个字符', trigger: 'blur' }
        ]
      },
      activeName: '1',
      tableData: [
        {
          id:'1',
          responsiblePerson:'',
          depart:''
        }
      ],
      multipleSelection: []
    }
  },
  props: {
    row: {
      type: Object,
      default: () => {
      }
    },
    //关闭弹窗
    closeModal: {
      type: Function,
      default: null
    },
    ModalType: {
      type: String,
      default: ''
    }
  },
  watch: {
    row(n) {
      if (Object.keys(n).length !== 0) {
        this.ruleForm = Object.assign({}, n)
      }
    }
  },
  mounted() {
    if (Object.keys(this.row).length !== 0) {
      this.ruleForm = Object.assign({}, this.row)
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },

    //勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(11111111,val)
    },

    //新增
    add(){
      //id自增
      this.tableData.forEach((e,index)=>{
        e.id=index+1
      })
      let index = this.tableData.length
      this.tableData.push({
        id:index+1,
        responsiblePerson:'',
      })
    },

    //删除
    del(){
     if(this.multipleSelection.length!==1){
       this.$message.warning('请选择一条要删除的数据！')
     }else {
       let index = this.multipleSelection[0].id;
       this.tableData.splice(index-1, 1);
       this.tableData.forEach((e,index)=>{
         e.id=index+1
       })
     }
    },

    //发送
    send(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('发送成功！')
          this.closeModal();
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //保存
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功！')
          this.closeModal();
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.top-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  background: #1ab394;
  padding: 16px;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.tab-part {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #e7eff3;
  padding-bottom: 10px;
  margin-bottom: 16px;

  .part-line {
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #1ab394;
    float: left;
    margin-top: 2px;
    margin-right: 10px;
  }

  .part-title {
    font-weight: bold;
  }
}
.operate-button{
  margin-bottom: 10px;
  float: right;
}
</style>
